<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
	pageContext.setAttribute("basePath", basePath);
%>
<link rel="stylesheet" type="text/css" href="${basePath}css/bootstrap/bootstrap.css">
<link rel="stylesheet" type="text/css" href="${basePath}css/bootstrap/bootstrap-theme.css">
<link rel="stylesheet" type="text/css" href="${basePath}css/bootstrap/fileinput.min.css">
<link rel="stylesheet" type="text/css" href="${basePath}js/layer.2.4/layui.css">


<script type="text/javascript" src='${basePath}js/jquery.min.js'></script>
<script type="text/javascript" src='${basePath}js/bootstrap/bootstrap.min.js'></script>
<script type="text/javascript" src='${basePath}js/layer.2.4/layer.js'></script>
<script type="text/javascript" src='${basePath}js/fy.utils.js'></script>
<style>
	body,html {
		padding: 0;
		margin: 0;
	}
	
	.im-header {
		width:100%;
		height: 75px;
		background: #F9f9f9;
		border-bottom:1px solid #eee;
	}
	
	.im-header .im-face-box,.im-info-box {
		float: left;
	}
	
	.im-header .im-face-box {
		width: 80px;
		height: 54px;
		border-radius: 54px;
		padding: 5px 5px 5px 20px;
	}
	
	.im-header .im-face-box>img {
		width: 54px;
		height: 54px;
		border-radius: 54px;
	}
	
	.im-header .im-info-box {
		width:165px;
		margin-left: 10px;
		overflow: hidden;
	}
	
	.im-header .im-info-box p {
		font-size: 12px;
		line-height: 20px;
		height: 20px;
		padding: 2px;
		margin: 2px;
	}
	
	/* 好友列表 */
	.im-friends {
		
	}
	
	.im-friends .friend-group {
		height:auto;
		margin:0 10px;
		line-height:30px;
		cursor: pointer;
	}
	
	.im-group-collapse {
		/* 分组折叠   */
	}
	
	.im-friends .friend-group .iconfont {
		padding-right:2px;
		font-size:10px;
	}	
	
	.im-friends .im-ul-box  {
		display:none;
	}	
	
	.im-friends .im-ul-box .im-li {
		width:100%;
		height:50px;
		overflow: hidden;
		padding-left:30px;
		list-style: none;
		padding-top:3px;
		padding-bottom:3px;
	}		
	
	.im-friends .im-li:hover {
		background: #eee;
	}	
	
	.im-friends .im-li:hover .nickname {
		color:#000;
	}
	
	.im-friends .im-li .im-li-img,.im-li-text {
		float:left;
	}
	
	.im-friends .im-li .im-li-img  {
		width:40px;
		border-radius:40px;
	}	
	
	.im-friends .im-li .im-li-text {
		margin-left:10px;
		color:#888;
	}
	
	.im-friends .im-li-text .nickname,.signature {
		height:20px;
		line-height:15px;
		font-size:8px;
		cursor: default;
	}
	
	.im-friends .im-li-text .nickname {
		font-size:14px;
	}	
		
</style>

<div class="im-header">
	<div class="im-face-box">
		<img alt="" src="${basePath}images/face.jpg" width="100%">
	</div>
	<div class="im-info-box">
		<p>在线  <i class="iconfont icon-nryc"></i></p>
		<p id="nickname">vip 88888</p>
		<p>IM实验田,来搞一个自己的聊天工具</p>
	</div>
</div>
<div class="im-friends">
	<div class="friend-group" data-idx="0" data-name="myfriend">
		<span class="iconfont icon-nextpage"></span> 我的好友
	</div>
	<div class="im-ul-box" data-name="myfriend">
		<ul class="im-group-ul collapse">
			<li class="im-li">
				<img class="im-li-img" alt="" src="${basePath}images/face.jpg">
				<div class="im-li-text">
					<div class="nickname">zeke</div>
					<div class="signature">每天进步一点</div>
				</div>
			</li>
			<li class="im-li">
				<img class="im-li-img" alt="" src="${basePath}images/face.jpg">
				<div class="im-li-text">
					<div class="nickname">zzw</div>
					<div class="signature">最近爱好js了</div>
				</div>
			</li>
			<li class="im-li">
				<img class="im-li-img" alt="" src="${basePath}images/face.jpg">
				<div class="im-li-text">
					<div class="nickname">kobe</div>
					<div class="signature">牛哄哄</div>
				</div>
			</li>						
		</ul>
	</div>

	<div class="friend-group" data-idx="1" data-name="myworker">
		<span class="iconfont icon-nextpage"></span> 我的同事
	</div>
	<div class="im-ul-box" data-name="myworker">
		<ul class="im-group-ul collapse">
			<li class="im-li">
				<img class="im-li-img" alt="" src="${basePath}images/face.jpg">
				<div class="im-li-text">
					<div class="nickname">zeke</div>
					<div class="signature">每天进步一点</div>
				</div>
			</li>
			<li class="im-li">
				<img class="im-li-img" alt="" src="${basePath}images/face.jpg">
				<div class="im-li-text">
					<div class="nickname">zzw</div>
					<div class="signature">最近爱好js了</div>
				</div>
			</li>
			<li class="im-li">
				<img class="im-li-img" alt="" src="${basePath}images/face.jpg">
				<div class="im-li-text">
					<div class="nickname">kobe</div>
					<div class="signature">牛哄哄</div>
				</div>
			</li>						
		</ul>
	</div>	
</div>





<script type="text/javascript">

	$(function(){
		$("#nickname").text("${nickname}");
		var wsMsg = parent.wsMsg;//console.log(wsMsg);
		var users = wsMsg.users;//console.log(users);
		/* 更新用户自己的信息 */
		updateInfo(wsMsg.from);
		/* 更新好友列表 */
		updateFirendGroup(users);
		
	});
	
	/* 更新用户信息方法 */
	function updateInfo(name){
		$("#nickname").text(name);
	}
	
	/* 更新好友列表方法 */
	function updateFirendGroup(users){
		$(".im-group-ul").html("");
		var myfriends = '';
		var myworkers = '';		
		if(users && users.length > 0){
			for(var i=0; i<users.length; i++){
				for(u in users[i]){
					var key = u; 
					var user = FY.strToJson(users[i][u]);
					if(user && user.group){
						if(user.group == "myfriend"){
							myfriends += friendTempate(key,user);
						}else if(user.group == "myworker"){
							myworkers +=friendTempate(key,user);
						}
					}
					
				}
			}
			//更新列表
			var $uls = $(".im-ul-box");
			for(var g=0; g<$uls.length ; g++){
				var $ul = $uls.eq(g);
				var gname = $ul.data("name");
				if(gname == "myfriend"){
					$ul.find("ul").html(myfriends).fadeIn();
				}else if(gname == "myworder"){
					$ul.find("ul").html(myworkers).fadeIn();
				}
			}
			
			//绑定事件
			$(".im-li").each(function(){
				$(this).bind("dblclick",function(evt){
					var nickname = $(this).find(".nickname").text().trim();
					var signature = $(this).find(".signature").text().trim();
					var user = {
							nickname: nickname,
							signature: signature
					};
					parent.showMsgWindow(user);
				});
			});
			
		}
	}
	
	//好友列表模板
	function friendTempate(key,user){
		return "<li class='im-li'>"+
		 "	<img class='im-li-img' alt='' src='${basePath}images/face.jpg'>"+
		 "	<div class='im-li-text'>"+
		 "		<div class='nickname'>"+key+"</div>"+
		 "		<div class='signature'>"+user.signature+"</div>"+
		 "	</div>"+
		 "</li>";
	}
	
	

	/* 折叠分组 */
	$(".friend-group").on("click",function(evt){
		var name = $(this).data("name"); 
		var idx=0;
		$(".friend-group").each(function(){
			if($(this).data("name") == name){
				return false;
			}
			idx++;
		});
		firendsCollapse(idx);
	});

	
	/* 统一折叠好友分组的方法  */
	function firendsCollapse(idx){
		var $uls = $(".im-ul-box");
		var $groups = $(".friend-group");
		var clsName = "group-collapse";
		var $group = $groups.eq(idx);
		var $group_ul = $uls.eq(idx).find("ul");
		$group.toggleClass(clsName);
		if($group.hasClass(clsName)){
			$group.children("span").removeClass("iconfont icon-nextpage")
			.addClass("iconfont icon-xla");
			$uls.eq(idx).css({"display":"block"});
			$group_ul.slideDown("fast");
		}else{
			$group.children("span").removeClass("iconfont icon-xla")
			.addClass("iconfont icon-nextpage");	
			$uls.eq(idx).css({"display":"block"});
			$group_ul.slideUp("fast");
		}
	}




</script>
